<template>
<!-- 收入预测 -->
  <div class="revenue-content">
    <van-row style="background: #FFF">
      <van-col span="12">
        <div class="login-name">{{ userInfo.gridDesc || '' }}</div>
      </van-col>
      <van-col span="12">
        <date-time ref="dataTimeRefday" @date="handleChange" />
      </van-col>
    </van-row>
    <div class="detail-info">
      <div class="info-desc">本月预测收入<span>{{ info.PREDICT_FEE || 0 }}<span class="accfee-unit">元</span></span></div>
      <div class="info-desc">本月计费收入<span>{{ info.JF_FEE || 0 }}<span class="accfee-unit">元</span></span></div>
      <div class="info-desc">上月出账收入<span>{{ info.ACCT_FEE_LM || 0 }}<span class="accfee-unit">元</span></span></div>
      <div class="info-desc">去年同期出账收入<span>{{ info.ACCT_FEE_LYM || 0 }}<span class="accfee-unit">元</span></span></div>
    </div>
    <div class="detail-info">
      <span class="accfee-title">截止到</span>
      <span class="accfee-size">{{ acctfeeDay }}</span>
      <span class="accfee-title">号，本月实时出账收入为</span>
      <span class="accfee-size">{{ acctfee }}<span class="accfee-unit">元</span></span>
    </div>
    <reven-line ref="revenueLineRef" />
  </div> 
</template>

<script>
import Vue from 'vue'
import { USER_INFO } from "@/store/mutation-types"

import dateTime from '@/components/common/dateTime.vue'
import { accountDate } from '@/api/common.js'
import * as dayjs from "dayjs"

import { revenueTotal, revenueLine, revenueReal } from '@/api/publicline/board.js'
import revenLine from '@/views/components/publicline/board/revenueLine.vue'

export default {
  components: { dateTime, revenLine },
  data() {
    return {
      userInfo: {},
      dayId: '',
      info: {},
      acctfee: '',
      acctfeeDay: '',
    }
  },
  mounted() {
    this.userInfo = Vue.ls.get(USER_INFO).appRole
    this.getAccountDate()
  },
  methods: {
    // 获取日账期
    async getAccountDate() {
      const res = await accountDate({ PARAMCODE: 'D' })
      const { result, success } = res
      if (success) {
        this.dayId = dayjs(result[0].value).format('YYYY-MM-DD')
        this.$refs.dataTimeRefday.initDateTime(this.dayId)
        this.getTotal()
        this.getReal()
        this.getLine()
      }
    },
    // 获取改变的账期
    handleChange(val) {
      this.dayId = val
      this.getTotal()
      this.getReal()
      this.getLine()
    },
    // 获取合计
    async getTotal() {
      const params = {
        gridId: this.$gridId,
        dayId: dayjs(this.dayId).format('YYYYMMDD')
      }
      const res = await revenueTotal(params)
      const { result, success } = res
      if(success) {
        this.info = result[0] || {}
      }
    },
    // 获取实时出账收入最大值
    async getReal() {
      const params = {
        gridId: this.$gridId,
        monthId: dayjs(this.dayId).format('YYYYMM')
      }
      const res = await revenueReal(params)
      const { result, success } = res
      if(success) {
        const info = result[0] || {}
        this.acctfee = info.ACCT_FEE || 0
        this.acctfeeDay = info.DAY_ID || ''
      }
    },
    // 获取趋势
    async getLine() {
      const params = {
        gridId: this.$gridId,
        dayId: dayjs(this.dayId).format('DD'),
        monthId: dayjs(this.dayId).format('YYYYMM')
      }
      const res = await revenueLine(params)
      const { result, success } = res
      if(success) {
        this.$refs.revenueLineRef.initLine(
          this.groupData(result, 'DAY_ID'),
          this.groupData(result, 'PREDICT_FEE'),
          this.groupData(result, 'ACCT_FEE'),
          this.groupData(result, 'JF_FEE'),
          this.groupData(result, 'ACCT_FEE_LM'),
        )
      }
    },
    groupData(data, key) {
      const value = []
      data.map(item => {
        if(key == 'ACCT_FEE') {
          value.push(item[key] > 0 ? item[key] : '')
        } else {
          value.push(item[key])
        }
        return item
      })
      return value
    },
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/less/person.less';
.login-name {
  padding: 12px 16px;
}
.detail-info {
  margin-top: 6px;
  padding: 6px;
  flex-wrap: wrap;
  .info-desc {
    background-image: url('~@/assets/imgs/publicline/board/bg-card-fz.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-align: center;
    width: 50%;
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    > span {
      padding-top: 8px;
      font-size: 16px;
      color: #4D98FF;
    }
  }
  .accfee-title,
  .accfee-unit {
    font-size: 12px;
    color: #666;
  }
  .accfee-size {
    padding: 0 2px;
    font-size: 14px;
    color: #4D98FF;
  }
  .accfee-unit {
    padding-left: 2px;
  }
}
.revenue-content {
  .charts {
    background: #fff;
    padding-top: 8px;
  }
}
</style>
